<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>客户地区统计</title>
</head>
<body style="height: 100%; margin: 0">
 	<div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="${ctx}/resources/js/echarts.min.js"></script>
    <script type="text/javascript" src="${ctx}/resources/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $.get("${ctx}/stat/loadCustomerAreaStatJosn.action",function(data){
    	
    
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		console.log(data);
		
		option = {
		    title: {
		        text: '客户地区统计',
		        subtext: '真实有效',
		        left: '32%'
		    },
		    tooltip: {
		        trigger: 'item',
		        formatter: '{a} <br/>{b} : {c} ({d}%)'
		    },
		    legend: {
		        type: 'scroll',
		        orient: 'vertical',
		        left: 10,
		        top: 20,
		        bottom: 20,
		        data: data
		    },
		    series: [
		        {
		            name: '客户数量(占比)',
		            type: 'pie',
		            radius: '55%',
		            center: ['35%', '50%'],
		            data: data,
		            emphasis: {
		                itemStyle: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
	    myChart.setOption(option, true);
    })
    </script>
</body>
</html>